<template>
	<main class="details-main">
		<kui-header :title="`详情`">
			<span slot="header-right"></span>
		</kui-header>
		<div class="details-title">
			<div>{{ detData.title }}</div>
		</div>
		<div class="details-content" v-html="detData.content"></div>
	</main>
</template>

<script>
	export default {
		name: "detailsMain",
		data (){
			return {
				detData:''
			}
		},
		methods:{
			detailsData(){
				let getUrl = `/api/v1/topic/${this.$route.params.id}`
				this.$axios.get(getUrl)
					.then(res=>{
						let { data } = res.data
						this.detData = data
					})
					.catch(console.log)
			}
		},
		mounted() {
			this.detailsData()
		}
	}
</script>

<style lang="scss">
.details-title{
	border-bottom: 1px solid #ccc;
	padding: 10px;
}
.details-content{
	margin-top: 15px;
	padding: 0 10px;
	overflow: hidden;
	word-wrap:break-word;
	img{width: 100%;}
	code{
		word-wrap:break-word;
	}
}
</style>